<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TableInstance } from 'element-plus'
import { classificationList } from '../../utils/trueType'
import { useClassificationListStore } from '../../store/classificationList'
import { SubClassification } from '../../utils/trueType'
import classification from '../../api/classification'
import ClassificationListButton from './classificationListButton.vue'
import editClassification from './editClassificationCategory.vue'
import editSubcategory from './editClassificationSubcategory.vue'
import { useEditClassificationStore } from '../../store/editClassification'

const classificationListStore = useClassificationListStore()
const editClassificationStore = useEditClassificationStore()
const multipleTableRef = ref<TableInstance>()
const selectable1 = (row: SubClassification) => {
    return !!row.subcategoryId // 确保有有效ID的行才允许选择
}
async function handleSubmitIsDeactivate(id) {
    await classification.updateClassification(id).catch((error) => {
        console.log(error)
    })
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
async function handleSubmitIsDeactivate1(id) {
    await classification.updateClassification1(id)
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
async function handleSubcategorySubmitIsDeactivate1(id) {
    await classification.setClassificationSubcategory1(id)
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
async function handleSubcategorySubmitIsDeactivate0(id) {
    await classification.setClassificationSubcategory0(id)
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
//编辑一级分类
async function editCategory(id) {
    await classification.getEditClassification(id).then((res) => {
        editClassificationStore.EditRufrom = res.data.data
        editClassificationStore.changeIsOpen(true)
    })
}
//编辑二级分类
async function EditSubcategory(id) {
    await classification.getEditClassification(id).then((res) => {
        editClassificationStore.EditRufrom = res.data.data
        editClassificationStore.changeSubcategoryIsOpen(true)
    })
}

// 修改选择处理函数
const handleSubSelectionChange = (val: SubClassification[]) => {
    const mainSelections = val.map(item => item.subcategoryId).filter(Boolean) as string[]
    classificationListStore.selectedIds = mainSelections
}

// 修改获取数据后的处理
onMounted(async () => {
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data.map((item: classificationList) => ({
            ...item,
            children: item.children?.map(child => ({ ...child, selected: false })) // 初始化子项选中状态
        }))
    })
    console.log(classificationListStore.classificationList)
})

</script>
<template>
    <ClassificationListButton />
    <el-table v-loading="classificationListStore.loading" ref="multipleTableRef"
        :data="classificationListStore.classificationList" style="width: 100%;" max-height="500px" class="classification-list"
        row-key="categoryId" :header-cell-style="{ background: '#f5f7fa', fontWeight: '600' }">
        <el-table-column label="分类id" width="140" align="center" header-align="center">
            <template #default="scope">{{ scope.row.categoryId }}</template>
        </el-table-column>
        <el-table-column property="category" label="一级分类" width="180" align="center" header-align="center" />
        <el-table-column property="subcategoryNumber" label="子级分类数量" width="160" align="center" header-align="center" />
        <el-table-column label="状态" width="200" align="center" header-align="center">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.categoryIsDeactivate === 1">启用</el-tag>
                <el-tag type="danger" v-if="scope.row.categoryIsDeactivate === 0">停用</el-tag>
            </template>
        </el-table-column>
        <el-table-column type="expand">
            <template #default="{ row }">
                <el-table :data="row.children" :row-key="row => row.subcategoryId"
                    style="background: #f8f9fc; margin: 12px 20px; width: calc(100% - 40px);max-height: 300px;"
                    @selection-change="handleSubSelectionChange">
                    <el-table-column type="selection" :selectable="selectable1" reserve-selection
                        :reserve-selection-key="row => row.subcategoryId" width="55" align="center"
                        header-align="center" />
                    <el-table-column label="分类编号" prop="subcategoryId" width="180" align="center"
                        header-align="center" />
                    <el-table-column label="二级分类" prop="subcategory" width="120" align="center" header-align="center" />
                    <el-table-column label="状态" prop="subcategoryIsDeactivate" width="160" align="center"
                        header-align="center">
                        <template #default="{ row }">
                            <el-tag :type="row.subcategoryIsDeactivate ? 'success' : 'danger'">
                                {{ row.subcategoryIsDeactivate ? '启用' : '停用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200" align="center" header-align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.subcategoryIsDeactivate === 1" type="danger" size="small"
                                @click="handleSubcategorySubmitIsDeactivate0(scope.row.subcategoryId)">
                                停用
                            </el-button>
                            <el-button :disabled="row.categoryIsDeactivate === 0"
                                v-if="scope.row.subcategoryIsDeactivate === 0" type="success" size="small"
                                @click="handleSubcategorySubmitIsDeactivate1(scope.row.subcategoryId)">
                                启用
                            </el-button>
                            <el-button type="primary" size="small"
                                @click="EditSubcategory(scope.row.subcategoryId)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="auto" align="center" header-align="center">
            <template #default="scope">
                <el-button v-if="scope.row.categoryIsDeactivate === 1" type="danger" size="small"
                    @click="handleSubmitIsDeactivate(Number(scope.row.categoryId))">
                    停用
                </el-button>
                <el-button v-if="scope.row.categoryIsDeactivate === 0" type="success" size="small"
                    @click="handleSubmitIsDeactivate1(Number(scope.row.categoryId))">
                    启用
                </el-button>
                <el-button type="primary" size="small" @click="editCategory(scope.row.categoryId)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <editClassification />
    <editSubcategory></editSubcategory>
</template>

<style scoped>
.classificationList {
    display: flex;
    align-items: center;
    margin: 2rem 0;
}

.classification-list {
    margin: 20px 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

:deep(.el-table__expanded-cell) {
    padding: 0 50px !important;
    background-color: #f8f9fc;
}

:deep(.el-table__row--level-1) td {
    background-color: #f8f9fc;
}

.el-tag {
    margin: 4px 0;
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
}

.el-button {
    margin: 2px;
    padding: 6px 10px;
}

/* 添加以下样式优化嵌套表格 */
:deep(.el-table__expanded-cell) {

    background: #f8f9fc;
}

:deep(.el-table__inner-wrapper) .el-table__body tr:hover>td {
    background-color: #f5f7fa !important;
}

:deep(.el-table__inner-wrapper) .el-table__row {
    background: #f8f9fc;
}

:deep(.el-table__inner-wrapper) .el-table__cell {
    padding: 8px 0;
}
</style>